<template>
  <view class="welfare">
    <view class="top">
      <view class="one">
        <view class="tips"> 若下列情况发生您可申请保障 </view>
        <view class="name"> 服务期内： </view>
        <view class="title"> 因慢病导致的重症疾病，而产生了医保报销之外的住院医疗费用 </view>
      </view>
      <view class="two">
        <view class="title">保障范围</view>
        <view class="content">符合保障的重症疾病说明</view>
        <view class="lookBtn" @click="articleLimits">查看</view>
      </view>
    </view>
    <view class="center">
      <view class="name">申领指引</view>
      <view class="one">
        <view class="title">申领流程</view>
        <view class="step">
          <uni-steps
            active-color="#F34E1C"
            :options="[{ title: '提交信息' }, { title: '提交材料' }]"
            :active="1"
          ></uni-steps>
          <view class="lookBtn" @click="submitInfoMore">查看详情</view>
        </view>
      </view>
      <view class="two">
        <view class="title">申领保障的材料及标准 </view>
        <view class="content"> 点击了解流程详情</view>
        <view class="lookBtn" @click="uploadInfoMore">查看详情</view>
      </view>
    </view>
    <view class="foot">
      <view class="title">信息真实性要求</view>
      <view class="content"
        >您提交的信息需真实准确，若有虚假、不实或故意隐瞒者，将影响获得保障，情节严重者可能被追究法律责任</view
      >
    </view>
    <view v-if="power" class="uni-btn-v">
      <button form-type="submit" @click="goIllForm">符合要求，立即申请</button>
    </view>
    <view v-else class="uni-btn-v">
      <button class="disable" form-type="submit" @click="nopermission">符合要求，立即申请</button>
    </view>
    <popCom v-if="artVisiable" :title="title" :content="content" @popCenter="popCenter" @popClose="popClose"> </popCom>
  </view>
</template>

<script>
import { getCanAssistanceApply } from '@/api/join.js';
import popCom from '@/components/popCom';
export default {
  components: {
    popCom
  },
  data() {
    return {
      power: true,
      testIcon: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/weixin-static/insurance/ysgc.jpg',
      title: '保障范围',
      content: '我是内容我',
      artVisiable: false
    };
  },
  onLoad() {},
  mounted() {
    this.getCanAssistanceApplyObj();
  },
  methods: {
    getCanAssistanceApplyObj() {
      const patientId = wx.getStorageSync('patientid');
      getCanAssistanceApply(patientId).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.power = false;
        } else {
          this.power = true;
        }
      });
    },
    submitInfoMore() {
      this.title = '申领流程';
      this.content = `
      <div class="text">(1) 会员出险后联系专家的健康管家或者致电400-010-1516进行报案；</div>
      <div class="text">(2) 专属健康管家协助会员准备相关理赔资料；</div>
      <div class="text">(3) 万户健康协助会员向项目公司申请理赔。</div>
      <div class="text">(4) 项目公司进行理赔流程。</div>
      <div class="text">(5) 会员获得理赔金额。</div>`;
      this.artVisiable = true;
    },
    articleLimits() {
      this.title = '保障范围';
      this.content = '保障范围的内容';
      this.artVisiable = true;
    },
    uploadInfoMore() {
      this.title = '申领保障的材料及标准';
      this.content = '申领保障的材料及标准的内容';
      this.artVisiable = true;
    },
    goIllForm() {
      this.$wxPromise.navigateTo({
        url: '/pages/getWelfareGold/illnessForm'
      });
    },
    popCenter() {
      this.artVisiable = false;
    },
    nopermission() {
      wx.showModal({
        title: '很抱歉',
        content: '您或您的关系人均未达到保障金的申领标准。',
        showCancel: false,
        success: function (res) {}
      });
    }
  }
};
</script>
<style>
page {
  background-color: #f4f4f4;
}
.uni-btn-v button {
  border: none !important;
}
button:after {
  border: none !important;
}
</style>
<style lang="scss">
.welfare {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .top {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    margin-bottom: 24rpx;
    .one {
      background: rgba(255, 225, 222, 1);
      padding: 40rpx;
      .tips {
        color: rgba(0, 0, 0, 0.55);
        font-size: 24rpx;
      }
      .name {
        font-size: 32rpx;
        color: rgba(243, 78, 28, 1);
        padding: 16rpx 0;
      }
      .title {
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        font-weight: 500;
      }
    }
    .two {
      padding: 40rpx;
      position: relative;
      .title {
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        font-weight: 500;
      }
      .content {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.55);
      }
      .lookBtn {
        position: absolute;
        right: 60rpx;
        top: 60rpx;
        font-size: 24rpx;
        background: rgba(243, 78, 28, 1);
        color: #fff;
        padding: 0 44rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 28rpx;
      }
    }
  }
  .center {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    padding: 24rpx;
    .name {
      color: rgba(0, 0, 0, 0.55);
      font-size: 32rpx;
      padding-bottom: 24rpx;
    }
    .one {
      background-color: #fff3ef;
      padding: 24rpx;
      border-radius: 16rpx;
      position: relative;
      .title {
        font-size: 32rpx;
        font-weight: 500;
      }
      .step {
        padding: 30rpx 0 20rpx 0;
        width: 400rpx;
      }
      .lookBtn {
        position: absolute;
        right: 20rpx;
        bottom: 40rpx;
        width: 136rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border: 2rpx solid #f34e1c;
        border-radius: 28rpx;
        font-size: 24rpx;
        color: rgba(243, 78, 28, 1);
      }
    }
    .two {
      background-color: #fff3ef;
      padding: 24rpx;
      border-radius: 16rpx;
      position: relative;
      margin-top: 16rpx;
      .title {
        font-size: 32rpx;
        font-weight: 500;
      }
      .content {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.55);
      }
      .lookBtn {
        position: absolute;
        right: 20rpx;
        bottom: 40rpx;
        width: 136rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border: 2rpx solid #f34e1c;
        border-radius: 28rpx;
        font-size: 24rpx;
        color: rgba(243, 78, 28, 1);
      }
    }
  }
  .foot {
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 24rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
      padding-bottom: 16rpx;
    }
    .content {
      font-size: 24rpx;
    }
  }
  .uni-btn-v {
    margin: 60rpx 0;
    button {
      width: 702rpx;
      height: 88rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
      background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
      opacity: 1;
      border-radius: 44rpx;
      color: #fff;
      font-size: 36rpx;
    }
    .disable {
      background: none;
      background-color: #ddd;
      // pointer-events: none;
    }
  }
}
.uni-steps__row-check {
  width: 5px;
  height: 5px;
  background-color: #f34e1c;
}
</style>
